import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
import ViteImages from 'vite-plugin-vue-images'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // setup name 增强
    VueSetupExtend(),
    // 自动导包
    AutoImport({
      imports: [
        // 插件预设支持导入的api
        'vue',
        'vue-router',
      ],
    }),
    // 自动导入图片
    ViteImages({
      dirs: ['src/assets'], // 指明图片存放目录
    }),
  ],
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': path.resolve(__dirname, './src'),
    }
  },
  css: {
    preprocessorOptions: {
      // scss: {
      //   additionalData: `@import "@/styles/_variables.scss";@import "@/styles/_mixins.scss";`,
      // },
    },
  },
  server: {
    hmr: { overlay: false }, // 为 false 可以禁用服务器错误遮罩层
    port: 2345,
    open: false,
    host: '0.0.0.0',
  },
  build: {
    cssCodeSplit: false, // 整个项目中的所有 CSS 将被提取到一个 CSS 文件中
    chunkSizeWarningLimit: 1500, // chunk 大小警告的限制（以 kbs 为单位）
    rollupOptions: {
      // 指定生成静态资源的存放路径
      output: {
        chunkFileNames: 'js/[name].[hash].js',
        entryFileNames: 'js/[name].[hash].js',
        assetFileNames: '[ext]/[name].[hash].[ext]',
      },
    },
  },
})
